<template>
	<view class="mine-container">
		<CustomNav :nav-info="navInfo" />
		<view class="mine-container-top">
			<view class="mine-container-banner">
				<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/mine/banner.png" mode="aspectFill"></image>
			</view>
			<view class="mine-user">
				<image class="avatar" src="../../static/images/mine/avatar.jpeg" mode="aspectFill"></image>
				<text class="info">测试用户</text>
			</view>
			<view class="mine-container-actions">
				<view class="title">
					我的服务
				</view>
				<uni-grid :column="4" :show-border="false" :highlight="true" @change="change">
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/mine/rent.png" mode="aspectFill"></image>
							<text class="text">我的租房</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/mine/apply.png" mode="aspectFill"></image>
							<text class="text">我的申请</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/mine/activity.png" mode="aspectFill"></image>
							<text class="text">我的活动</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="custom-icons" src="../../static/images/mine/feedback.png" mode="aspectFill"></image>
							<text class="text">建议反馈</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../components/CustomNav/index.vue'
	export default {
		components: { CustomNav },
		data() {
			return {
				navInfo: {
					bg_color: 'transparent',
					color: "#000",
					name: '个人中心'
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.mine-container {
	min-height: 100vh;
	background-color: #F4F6F8;
	.custom-icons {
		width: 80rpx;
		height: 80rpx;
	}
	.mine-container-top {
		position: relative;
		.mine-container-banner {
			width: 100%;
		}
		.mine-user {
			display: flex;
			align-items: center;
			position: absolute;
			top: 40%;
			left: 5%;
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 120rpx;
				border: 3rpx solid #FFFFFF;
			}
			.info {
				margin-left: 20rpx;
				font-size: 40rpx;
				color: #292F38;
			}
		}
		.mine-container-actions{
			background-color: #fff;
			margin: 0 auto;
			width:90%;
			// margin-top: -20px;
			// z-index: 2;
			position: absolute;
			bottom: -100px;
			left: 5%;
			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #292F38;
				line-height: 45rpx;
				padding: 20rpx;
			}
			.grid-item-box {
				flex: 1;
				// position: relative;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;
			}
			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}
}
</style>
